<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>合同信息</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/contract.css">
    <link rel="stylesheet" type="text/css" href="font/iconfont.css">

    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<!-- 顶部 -->
    <header>
        <div class="header-left">返回</div>
        <div class="header-right">合同信息</div>
    </header>
<!-- 主体 -->
    <div class="main">
        <div class="top">
			<p id="name">巴拉巴拉</p>
			<div class="touxiang"><img id="faceImg" src="images/pic.png" style="width: 120px;height: 120px;border-radius: 100%;" alt=""></div>
		</div>
        <div class="content">
             <p>签约套数：<span id="houseCnt">2套</span></p>
             <p>分成方式：<span>净利分成</span><small>（抵扣成本）</small></p>
             <p>合计面积：<span id="sumArea">265.59㎡</span></p>
             <div id="app">
				<p v-for="(site,index) in sites">合同付款日：
					<span v-if="site.payType>1 && index==0">{{site.houseName}}（{{site.payDay}}日/{{site.payType}}月）</span>
					<span v-else-if="site.payType==1 && index==0">{{site.houseName}}（{{site.payDay}}日/月）</span>
					<span v-else-if="index!=0 && site.payType>1" style="margin-left:76px;">{{site.houseName}}（{{site.payDay}}日/{{site.payType}}月）</span>
					<span v-else-if="index!=0 && site.payType==1" style="margin-left:76px;">{{site.houseName}}（{{site.payDay}}日/月）</span>
				</p>

			</div>
			<div id="app1">
				<p v-for="(site,index) in sites">合同期限：
					<span v-if="index==0">{{site.houseName}}（{{site.factPayTimeStart  | time}}~{{site.factPayTimeEnd  | time}}）</span>
					<span v-else-if="index!=0">{{site.houseName}}（{{site.factPayTimeStart | time}}~{{site.factPayTimeEnd  | time}}）</span>
				</p>

			</div>
        </div>
    </div>
<!-- 底部 -->
    <footer>
        <ul>
            <a href="index.html"><li style="border-right: 1px solid #fff;"><i class="iconfont">&#xe633;</i><span>首页</span></li></a>
            <a href="bill.html"><li style="border-right: 1px solid #fff;"><i class="iconfont">&#xe754;</i><span>账单</span></li></a>
            <a href="person.html"><li class="blue"><i class="iconfont">&#xe61a;</i><span>我的</span></li></a>
        </ul>
    </footer>

</body>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/contract.js"></script>
<script src="js/flexible.js"></script>
<script src="js/vue.min.js"></script>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			sites: ''
		}
	})
	var vm1 = new Vue({
		el: '#app1',
		data: {
			sites: ''
		}
	})
	var id = localStorage.getItem("id");
	if(id) {
		$.post(
			rootpath + '/contractMaster/findContractMaster/' + id,
			function(data) {
				$("#name").html(data.nickname);
				$("#faceImg").attr("src", data.faceImg);
			}, "json"
		);
		$.post(
			rootpath + "/contractMaster/getRentPayList/" + localStorage.getItem("id"),
			function(data) {
				$("#houseCnt").html(data.houseCount + "套");
				$("#sumArea").html(data.sumArea + "㎡");
				vm.$data.sites = data.rentPayVoList;
				vm1.$data.sites = data.rentPayVoList;
			},
			"json"
		);
	} else {
		location.href = "login.html";
	}
	Vue.filter('time',
        function(value) {
            var date = new Date(value);
            Y = date.getFullYear(),
                m = date.getMonth() + 1,
                d = date.getDate();
            if (m < 10) {
                m = '0' + m;
            }
            if (d < 10) {
                d = '0' + d;
            }
            var t = Y + '-' + m + '-' + d;
            return t;
        }
    );
</script>
</html> 